<template>
  <div class="transport-ride">
    <!-- 线路查询 -->
    <el-card class="route-search">
      <template #header>
        <div class="card-header">
          <span>线路查询</span>
        </div>
      </template>
      
      <el-form :model="searchForm" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="线路类型">
              <el-select v-model="searchForm.type" placeholder="请选择线路类型">
                <el-option label="公交" value="bus" />
                <el-option label="地铁" value="subway" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="线路名称">
              <el-input 
                v-model="searchForm.keyword" 
                placeholder="请输入线路名称"
                @input="handleSearch"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 线路列表 -->
    <el-card v-if="routes.length > 0" class="route-list">
      <template #header>
        <div class="card-header">
          <span>线路列表</span>
        </div>
      </template>

      <el-table :data="routes" style="width: 100%">
        <el-table-column prop="name" label="线路名称" width="120" />
        <el-table-column prop="type" label="类型" width="100">
          <template #default="{ row }">
            <el-tag :type="row.type === 'bus' ? 'success' : 'primary'">
              {{ row.type === 'bus' ? '公交' : '地铁' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="start_station" label="起始站" width="150" />
        <el-table-column prop="end_station" label="终点站" width="150" />
        <el-table-column prop="first_time" label="首班车" width="100" />
        <el-table-column prop="last_time" label="末班车" width="100" />
        <el-table-column prop="interval" label="发车间隔" width="100" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="{ row }">
            <el-button 
              type="primary" 
              link
              @click="handleSelectRoute(row)"
            >
              选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 乘车码 -->
    <el-card v-if="selectedRoute" class="ride-code">
      <template #header>
        <div class="card-header">
          <span>乘车码</span>
          <el-button 
            type="primary" 
            link
            @click="handleRefreshCode"
          >
            刷新
          </el-button>
        </div>
      </template>

      <div class="code-content">
        <div class="qr-code">
          <img :src="qrCodeUrl" alt="乘车码" />
          <p class="code-tip">请将乘车码对准闸机扫描区域</p>
        </div>
        <div class="route-info">
          <h3>{{ selectedRoute.name }}</h3>
          <p>类型：{{ selectedRoute.type === 'bus' ? '公交' : '地铁' }}</p>
          <p>票价：¥{{ selectedRoute.price }}</p>
          <p>支付方式：{{ paymentType === 'credit' ? '信用支付' : '普通支付' }}</p>
        </div>
      </div>

      <div class="payment-options">
        <el-radio-group v-model="paymentType">
          <el-radio label="credit">信用支付</el-radio>
          <el-radio label="normal">普通支付</el-radio>
        </el-radio-group>
      </div>
    </el-card>

    <!-- 乘车记录 -->
    <el-card class="ride-records">
      <template #header>
        <div class="card-header">
          <span>乘车记录</span>
        </div>
      </template>

      <el-table :data="rideRecords" style="width: 100%">
        <el-table-column prop="route_name" label="线路" width="120" />
        <el-table-column prop="start_station" label="上车站" width="150" />
        <el-table-column prop="end_station" label="下车站" width="150" />
        <el-table-column prop="start_time" label="上车时间" width="180" />
        <el-table-column prop="end_time" label="下车时间" width="180" />
        <el-table-column prop="amount" label="金额" width="100">
          <template #default="{ row }">
            ¥{{ row.amount }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'completed' ? 'success' : 'warning'">
              {{ row.status === 'completed' ? '已完成' : '进行中' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {
  getTransitLines,
  getTransitRecords,
  startTransit
} from '@/api/transit'

// 搜索表单
const searchForm = ref({
  type: '',
  keyword: ''
})

// 线路列表
const routes = ref([])
const selectedRoute = ref(null)

// 乘车码
const qrCodeUrl = ref('')
const paymentType = ref('normal')

// 乘车记录
const rideRecords = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 搜索线路
const handleSearch = async () => {
  try {
    const res = await getTransitLines(searchForm.value.type, searchForm.value.keyword)
    routes.value = res.data
  } catch (error) {
    ElMessage.error('搜索线路失败')
  }
}

// 选择线路
const handleSelectRoute = async (route) => {
  selectedRoute.value = route
  await generateQRCode()
}

// 生成乘车码
const generateQRCode = async () => {
  try {
    const res = await startTransit({
      line_type: selectedRoute.value.type,
      line_number: selectedRoute.value.name,
      payment_method: paymentType.value
    })
    qrCodeUrl.value = res.data.qr_code_url
  } catch (error) {
    ElMessage.error('生成乘车码失败')
  }
}

// 刷新乘车码
const handleRefreshCode = async () => {
  try {
    const res = await startTransit({
      line_type: selectedRoute.value.type,
      line_number: selectedRoute.value.name,
      payment_method: paymentType.value
    })
    qrCodeUrl.value = res.data.qr_code_url
    ElMessage.success('乘车码已刷新')
  } catch (error) {
    ElMessage.error('刷新乘车码失败')
  }
}

// 加载乘车记录
const loadRideRecords = async () => {
  try {
    const res = await getTransitRecords({
      page: currentPage.value,
      per_page: pageSize.value
    })
    rideRecords.value = res.data.items
    total.value = res.data.total
  } catch (error) {
    ElMessage.error('加载乘车记录失败')
  }
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  loadRideRecords()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  loadRideRecords()
}

// 监听支付方式变化
watch(paymentType, () => {
  if (selectedRoute.value) {
    generateQRCode()
  }
})

onMounted(() => {
  loadRideRecords()
})
</script>

<style scoped>
.transport-ride {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.route-list {
  margin-top: 20px;
}

.ride-code {
  margin-top: 20px;
}

.code-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.qr-code {
  text-align: center;
  margin-right: 40px;
}

.qr-code img {
  width: 200px;
  height: 200px;
}

.code-tip {
  margin-top: 10px;
  color: #666;
}

.route-info {
  text-align: left;
}

.route-info h3 {
  margin: 0 0 10px 0;
}

.route-info p {
  margin: 5px 0;
  color: #666;
}

.payment-options {
  text-align: center;
  margin-top: 20px;
}

.ride-records {
  margin-top: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style> 